<template>
	<view class="content">
		<view class="top">
			<image src="/static/bottom/index.png" mode="widthFix"></image>
			<h1>猫之巢</h1>
			<h2>mao zhi chao</h2>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" duration="1000"
				:circular="true" indicator-active-color="#ffffff">
				<swiper-item v-for="(item,index) in bannerImage">
					<view class="image">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="center">
			<view class="center-left" @click="toOrder()">
				<h4 class="center-title">点单</h4>
				<image src="/static/image/car.png" mode="widthFix"></image>
			</view>
			<view class="center-right">
				<h4 class="center-title">关于我们</h4>
				<image src="/static/image/cat.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="bottom">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				bannerImage: [
					'../../static/banner/1.png',
					'../../static/banner/2.png',
					'../../static/banner/3.png',
					'../../static/banner/4.png',
				],

			}
		},
		onLoad() {

		},
		methods: {
			getBanner() {},
			toOrder(){
				uni.switchTab({
					url:"/pages/order/order"
				})
			}
		}
	}
</script>

<style>
	.content {
	}

	.top {
		text-align: center;
		padding-bottom: 40rpx;
	}

	.top image {
		width: 200rpx;
	}

	.top h1 {
		letter-spacing: 40rpx;
		margin-right: -40rpx;
	}

	.image {
		width: 100%;
		height: 160px;
	}

	.swiper {
		overflow: hidden;
	}

	.image image {
		width: 100%;
		align-items: center;
	}

	.center {
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		padding: 20rpx;
		margin:20rpx;
	}

	.center-left,
	.center-right {
		flex: 1;
		text-align: center;
		margin:0 30rpx;
		padding: 20rpx;
		height: 250rpx;
		box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
	}

	.center-left image,
	.center-right image {
		width: 60%;
		margin-top: 20rpx;
	}

	.center-title {
		color: gray;
		margin-bottom: 20rpx;
	}
</style>